<template>
	<view class="w-form-input-rv" v-if="readonly">
		<text style="line-height:70rpx;">{{ (_value || []).join('、') }}</text>
	</view>
	<uni-data-checkbox v-else-if="formProps.expanding" multiple v-model="_value" :localdata="options" />
	<multiple-picker v-slot="{ show }" v-else v-model="_value" :options="options">
		<click-input :value="props.modelValue"
			:placeholder="$t(props.formProps.placeholder) ?$t(props.formProps.placeholder):$t('webAuto.PleaseSelect')" @click="show" />
	</multiple-picker>
</template>

<script setup>
import { computed, ref } from 'vue'
import ClickInput from '@/components/ClickInput.vue'
import MultiplePicker from '@/components/common/MultiplePicker.vue'
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const props = defineProps({
	formProps: {
		type: Object,
		default: () => {
			return {}
		}
	},
	modelValue: Array,
	readonly: Boolean
})

const options = computed(() => {
	return props.formProps.options.map(v => {
		return { text: v, value: v }
	})
})

const index = ref(0)

const _value = computed({
	get() {
		return props.modelValue
	},
	set(val) {
		emits('update:modelValue', val)
	}
})

const emits = defineEmits(['update:modelValue'])

function ok(e) {
	index.value = e.detail.value
	_value.value = props.formProps.options[index.value]
}
</script>

<style></style>